<!--流程模型-->
<template>
  <div class="app-container">
    <el-form :model="selectForm" ref="selectForm" :inline="true">
      <el-form-item label="KEY">
        <el-input v-model="selectForm.key" placeholder="请输入key" clearable size="small"/>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="selectForm.name" placeholder="请输入名称" clearable size="small"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini"
                   @click="getList">搜索
        </el-button>
        <el-button type="success" icon="el-icon-plus" size="mini"  @click="add">创建新模型</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="datalist" border>
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column align="center" label="ID" property="id" width="160px"></el-table-column>
      <el-table-column align="center" label="KET" property="key" width="160px"></el-table-column>
      <el-table-column align="center" label="名称" property="name"/>
      <el-table-column align="center" label="版本" property="revision"/>
      <el-table-column align="center" label="创建时间" property="createTime" width="160px">
        <template slot-scope="scope">
           <span>{{formatDate(scope.row.createTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最后更新时间" property="lastUpdateTime" width="160px">
        <template slot-scope="scope">
          <span>{{formatDate(scope.row.lastUpdateTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="元数据" property="metaInfo"/>
      <el-table-column label="操作" align="center" width="350" >
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)" >编辑</el-button>
          <el-button size="mini" type="success" icon="el-icon-upload
" @click="bushu(scope.row)" >部署</el-button>
          <el-button size="mini" type="warning" icon="el-icon-download" @click="handleExport(scope.row)" >导出</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="添加流程模型"
      :visible.sync="dialogVisible"
      width="500px">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="90px" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input
            style="width: 300px"
            v-model="queryParams.name"
            placeholder="请输入名称"
            clearable
            size="mini"
          />
        </el-form-item>
        <el-form-item label="KEY"  prop="key">
          <el-input
            style="width: 300px"
            v-model="queryParams.key"
            placeholder="请输入KEY"
            clearable
            size="mini"
          />
        </el-form-item>
        <el-form-item label="描述" >
          <el-input
            style="width: 300px"
            v-model="queryParams.description"
            type="textarea"
            :rows="2"
            placeholder="请输入描述"
            clearable
            size="mini"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button  size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button  size="mini" type="primary" @click="tianjaiBtn">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import request from '@/utils/request'
  import {exportUserLC} from "@/api/material/theOtherHZ"
  import {formatDate} from "@/utils/index"
  import { modelerList, modelerCreate ,modelerDeploy,modelerDel} from '@/api/techProcess/index'
  import axios from 'axios';
  export default {
    name: 'cgju',
    data() {
      return {
        // 表单校验
        rules: {
          name: [
            { required: true, message: "名称不能为空", trigger: "blur" }
          ],
          key: [
            { required: true, message: "key不能为空", trigger: "blur" }
          ],
        },
        queryParams:{
          name:'',
          key:'',
          description:'',
        },
        dialogVisible:false,
        total:0,
        loading: false,
        datalist: [],
        selectForm: {
          pageNum: 1,
          pageSize: 10,
        },
        date: '',
        myReview: false,
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handleExport:function (row) {
        //导出
        this.$confirm('是否确认导出所有数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          var url = this.baseUrl()
          // url='http://192.168.0.57:8080'
          window.location.href =url + "/modeler/export/" + row.id;
          // let res = await exportUserLC(row.id)
          // debugger
          // return this.download(res.data)
        }).catch(function() {
        })
      },
      
      //添加确定
      tianjaiBtn(){
        if(!this.queryParams.name){
          this.$message.warning('名称不能为空！')
          return
        }
        if(!this.queryParams.key){
          this.$message.warning('key不能为空！')
          return
        }
        /* formData格式提交： */
        let formdata = new FormData();
        for(var key in this.queryParams){
          formdata.append(key,this.queryParams[key]);
        }
        modelerCreate(formdata).then(res => {
          if(res.code==200){
            this.$message.success(res.msg)
            this.dialogVisible=false
            this.$router.push({path:'/theProcessMenu/theProcessBJ',query:{data:res.data}})
          }
        })

      },
      /** 查询列表数据 */
      async getList() {
        this.loading = true
        let formdata = new FormData();
        for(var key in this.selectForm){
          formdata.append(key,this.selectForm[key]);
        }
        modelerList(formdata).then(response => {
          if(response.code==200){
            this.loading = false
            this.datalist = response.rows
            this.total = response.total
          }
        });
      },
      del(row) {
        //删除
        this.$confirm('确定删除该条流程模型信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let formdata = new FormData()
          formdata.append('ids',row.id)
          modelerDel(formdata).then(res => {
            if(res.code==200){
              this.$message.success(res.msg)
              this.getList()
            }
          })
        }).catch(() => {
          this.$message.info('取消删除')
        })
      },
      bushu(row){
        //部署
        this.$confirm('确认要部署至流程定义吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          modelerDeploy(row.id).then(res => {
            if(res.code==200){
              this.$message.success(res.msg)
              this.getList()
            }         
          });
        }).catch(() => {
          this.$message.info('取消部署')
        })
      },
      add() {
        this.dialogVisible=true
      },
      edit(row) {
        this.$router.push({path:'/theProcessMenu/theProcessBJ',query:{data:row.id}})
      },
      //时间转换
      formatDate
    }
  }
</script>
